<template>
  <div id="app">
    <router-view/>
    <theme-picker/>
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";

export default {
  name: "App",
  components: {ThemePicker},
  created() {
    /*setTimeout(() => {
      this.alter_news({
        title: 'bt2',
        message: 'cs2'
      })
    }, 2000)*/
  },
  methods: {
    start_webSocket() {
      const ws = new WebSocket('ws://192.168.10.127:8080/thunder/charge/socket/')
      // 连接成功的事件
      ws.onopen = () => {
        console.log('连接服务端成功')
      }
      ws.onmessage = msg => {
        console.log('从服务端获取到了数据' + msg.data)
        // if (this.callBackMapping) {
        // this.callBackMapping.call(this, dataList)
        // }
      }
    },
    alter_news(msg) {
      if (window.Notification && Notification.permission !== undefined) {
        /* denied——用户拒绝显示通知。
           granted——用户接受显示通知。
           default——用户选择是未知的，因此浏览器的行为类似于值是 denied。*/
        Notification.requestPermission((s) => {
          if (s == 'granted') {
            let n = new Notification(msg.title, {
              body: msg.message
            })
            n.onclick = () => {
              window.open(window.location.href, '_bank').close()
              n.close()
            }
          } else {
            window.alert(msg.message)
          }
        })
      }
    }
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>
